<template>
	<el-descriptions :direction="direction" :column="column">
    <el-descriptions-item v-for="item in desData" :key="item.label" :label="item.label">
			<div class="info-oper" v-if="item.type=='file'&&item.text">
				<FilePreview  :type="'view'" v-model="item.text"></FilePreview>
			</div>
			<div v-else-if="item.type=='image'" class="info-image">
				<FilePreview  :type="'view'" v-model="item.files"></FilePreview>
			</div>
			<span v-else-if="item.key=='result'">{{ item.text==2?'正常':'异常' }}</span>
			<span v-else>{{ item.text }}</span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { Picture } from '@element-plus/icons-vue'
import { downBlobFile } from '/@/utils/other';
import FilePreview from '/@/components/HyUploadCopy/index.vue';
const props = defineProps({
	direction: {
		type: String,
		default:'horizontal'
	},
	column: {
		type: Number,
		default:3
	},
	message: {
		type:Object,
		default:()=>{}
	},
	desData: {
		type: Array,
		default: () => []
	}
});

function downLoadFile(file){
	console.log(file)
	const fileData = file.url.split(',')
	fileData.forEach(item=>{
		if(item){
			const fileStr = item.split('?')&&item.split('?')[1]
			downBlobFile(`/admin/sys-file/oss/file?${fileStr}`, {}, fileStr.split('=')[1])
		}
	})
}

</script>

<style lang="scss" scoped>
.info-oper{
	display: inline-flex;
	align-items: center;
	.icon-span{
		display: inline-flex;
		align-items: center;
		margin-left: 10px;
		color: var(--el-color-primary);
	}
}
.info-image{
	display: inline-flex;
	flex-direction: column;
}
.image-slot {
	border:dashed 1px #dcdfe6;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	background: var(--el-fill-color-light);
	color: var(--el-text-color-secondary);
	font-size: 30px;
	p{
		width: 100%;
		text-align: center;
		font-size: 12px;
	}
}
.image-slot .el-icon {
	font-size: 30px;
}
.bgGrey{
	background-color: #f7f8fa;
	padding:0 5px;
	border-radius: 5px;
}
</style>
